

<template>

    <div>
        <!-- <el-row type="flex" justify="center" align="middle">
            <el-button @click="topNews"  type="primary">头条新闻</el-button>
            <el-button type="success">社会新闻</el-button>
            <el-button type="info">国际新闻</el-button>
            <el-button type="warning">科技新闻</el-button>
            <el-button type="danger">军事新闻</el-button>
        </el-row>
        <p/> -->
        <el-table :data="news" border style="width: 100%;" >
            <el-table-column prop="thumbnail_pic_s" label="图片" align="center" width="250" height="200">
                 <!-- 图片的显示 -->
                 <template   slot-scope="scope">            
                    <img :src="scope.row.thumbnail_pic_s"  width="200" height="200" />
                 </template>         
            </el-table-column> 
            <el-table-column label="新闻标题" prop="title" align="center" width="750"></el-table-column>
            <el-table-column label="发布日期" prop="date" align="center" width="250"></el-table-column>
            <el-table-column label="新闻作者" prop="author_name" align="center" width="200"></el-table-column>
            <el-table-column label="操作"  width="200" align="center">
                <template slot-scope="scope">
                    <el-button @click="newsClick(scope.row.url)" type="success" plain>查看新闻</el-button>
                </template>
            </el-table-column>
        </el-table>
        
    </div>
</template>



<script>
import { get } from '@/utils/request'  //从request导一个get过来
export default {
    //生命的周期
    mounted(){
        //初始化操作

        this.loadNews();
        
    },
    //数据
    data(){
        return {
            news:[]
        }
    },
// 方法

  methods:{

    //头条新闻
    // topNews(){
    //     this.type = "top"
    //     this.$router.go(0)
    // },

    // 加载新闻数据
    loadNews(){
      // 定义变量，请求地址
      let url = "toutiao/index"
      // 请求参数
      let param = {
        type:"top",
        key:"afbbea77d6486375887a71331aa26eef"
      }
      // 请求后台数据
      get(url,param).then( resp => {
        // 将返回结果中有价值的信息赋值给news, news表示所有的笑话
        this.news = resp.result.data;
      });
    },

    //查看新闻
    newsClick(row){
        window.open(row)
    }


  }
}
</script>
<style scoped>

</style>
